<template>
  <el-form :data="form">
    <div class="searchBox">
      <el-card class="box-card">
        <div class="top">
          <div class="top_left">
            <el-icon><Search /></el-icon>
            <span class="search_txt">筛选搜索 </span>
          </div>
          <div class="top_right">
            <el-button type="default" @click="Reset">重置</el-button>
            <el-button type="primary" @click="searchParamsFn"
              >查询搜索</el-button
            >
          </div>
        </div>
        <div class="under">
          <span>专题名称: </span>
          <el-input v-model="form.productName" placeholder="专题名称" />
          <span>推荐状态: </span>
          <el-select
            v-model="form.type"
            class="m-1"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span>推荐状态: </span>
          <el-date-picker v-model="form.endTime" placeholder="请选择时间" />
        </div>
      </el-card>
    </div>
  </el-form>

  <div class="add">
    <el-card>
      <div>
        <el-icon><Tickets /></el-icon>数据列表
      </div>
      <el-button size="small" @click="router.push(`/sms/addAdvertise`)"
        >添加广告</el-button
      >
    </el-card>
  </div>

  <el-table
    @selection-change="handleSelectionChange"
    :data="list"
    table-layout="auto"
    cell-class-name="align-c"
    header-row-class-name="align-c"
    border
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="name" label="广告名称" />
    <el-table-column prop="type" label="广告位置">
      <template #default="{ row }">
        <span>{{ row.type === 1 ? "APP首页轮播" : "PC首页轮播" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="pic" label="广告图片">
      <template #default="{ row }">
        <img :src="row.pic" alt="" height="80" />
      </template>
    </el-table-column>
    <el-table-column prop="startTime" label="时间">
      <template #default="{ row }">
        <div>开始时间：{{ dateFormat(row.startTime) }}</div>
        <div>到期时间：{{ dateFormat(row.startTime) }}</div>
      </template>
    </el-table-column>

    <el-table-column prop="status" label="上线/下线">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @click="updateStatusFn(row.id, row.status)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="clickCount" label="点击次数" />
    <el-table-column prop="orderCount" label="生成订单" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          text
          type="primary"
          size="small"
          @click="router.push(`/sms/addAdvertise?id=${row.id}`)"
          >编辑</el-button
        >
        <el-button
          text
          type="primary"
          size="small"
          @click="handleDelete(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <div class="footer">
    <div>
      <el-select v-model="BatchV" class="m-2" clearable placeholder="批量操作">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="BatchOperation">确定</el-button>
    </div>

    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="form.pageSize"
        :page-sizes="[5, 10, 15]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>
</template>

<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import useTable from "@/hooks/useTable";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import { Search, Tickets } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import {
  homeAdvertiseListApi,
  homeAdvertiseDeleteApi,
  advertiseUpdateStatusApi,
  subjectUpdateSortApi,
} from "./api/index";
import { dateFormat } from "@/utils/index";
import { useRouter } from "vue-router";

const router = useRouter();

const BatchV = ref("");
const options = [
  {
    value: "op1",
    label: "删除",
  },
];
// 批量操作
const BatchOperation = () => {
  if (BatchV.value == "op1") {
    handleBatchDelete();
  }
};

// 选中的数组
const ids = ref<number[]>([]);
const handleSelectionChange = (selection: HomeAdvertiseList[]) => {
  ids.value = [];
  selection.forEach((item) => {
    ids.value.push(item.id);
  });
};

// 修改状态
const updateStatusFn = (id: number, status: number) => {
  ElMessageBox.confirm("是否要修改推荐状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      advertiseUpdateStatusApi(id, status).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          // 更新页面
          pageChangeHandle();
        } else {
          ElMessage.success("已取消操作");
          pageChangeHandle();
        }
      });
    })
    .catch(() => {
      ElMessage.success("已取消操作");
      pageChangeHandle();
    });
};

const option = [
  {
    value: "op1",
    label: "PC首页轮播",
  },
  {
    value: "op2",
    label: "APP首页轮播",
  },
];

const form = reactive({
  pageSize: 5,
  productName: "",
  type: null,
  endTime: "",
});
const {
  list,
  pageNum,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  pageSize,
  searchParamsFn,
} = useTable(homeAdvertiseListApi, form);

// 单个删除
const handleDelete = (id: number) => {
  ElMessageBox.confirm("是否要删除该广告?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const ids = [];
      ids[0] = id;
      homeAdvertiseDeleteApi(ids).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          // 刷新页面
          pageChangeHandle();
        } else {
          ElMessage.error("删除失败");
        }
      });
    })
    .catch(() => {
      ElMessage.success("取消删除");
    });
};

// 批量删除
const handleBatchDelete = () => {
  if (ids.value.length === 0) {
    ElMessage.warning("请选择一条记录");
    return;
  }
  ElMessageBox.confirm("是否要删除该广告?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      homeAdvertiseDeleteApi(ids.value).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          // 刷新页面
          pageChangeHandle();
        } else {
          ElMessage.success("删除失败");
        }
      });
    })
    .catch(() => {
      ElMessage.success("取消删除");
    });
};

// 重置
const Reset = () => {
  // 初始化
  form.productName = "";
  form.type = null;
  form.endTime = "";
  pageSize.value = 5;
  pageNum.value = 1;
  searchParamsFn();
};
</script>

<style lang="less" scoped>
.searchBox {
  :deep(.el-card) {
    padding: 20px;
  }
  .top {
    position: relative;
    display: flex;
    .top_left {
      .search_txt {
        padding-left: 10px;
        font-size: 14px;
      }
    }
    .top_right {
      position: absolute;
      right: 20px;
    }
  }
  .under {
    padding: 20px 40px 0;
    font-size: 14px;
    :deep(.el-input) {
      height: 32px;
      line-height: 32px;
      width: 210px;
      padding-right: 20px;
    }
  }
}

.add {
  margin: 20px 0;
  :deep(.el-card__body) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}
:deep(.el-table__row) {
  .el-table_1_column_5 {
    // background-color: #cfc;
    .cell {
      width: 200px;
      overflow: hidden;
    }
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
</style>
